<template>
  <div>
    <el-card>
      <!--<el-button type="primary" size="small" @click="resetAllScore()">重置分数</el-button>-->
      <el-button type="primary" size="small" @click="getData()">评估</el-button>
      <!--表格-->
      <el-table :data="CurrentData">
        <!--<el-table-column type="index" min-width="6%" ></el-table-column>-->
        <el-table-column min-width="16%" prop="ip" label="IP"></el-table-column>
        <el-table-column min-width="50%" label="安全事件信息">
            <template v-slot="scope">
              {{cutstr(scope.row.securityEvent.split('||')[0],showLength)}}
              <el-button @click="viewDetails(scope.row.securityEvent)" type="text"
              v-if="scope.row.securityEvent.indexOf('||')">查看详情</el-button>
            </template>
        </el-table-column>
        <el-table-column min-width="8%" prop="score" label="分数"></el-table-column>
        <el-table-column min-width="6%" label="状态">
          <template v-slot="scope">
            <!--scope.row获取表格一行数据-->
            <i v-if="scope.row.score >= 60" :class="icons[1]"></i>
            <i v-if="scope.row.score < 60 && scope.row.score >= 30" :class="icons[2]"></i>
            <i v-if="scope.row.score < 30" :class="icons[3]"></i>
          </template>
        </el-table-column>
        <el-table-column min-width="6%" label="操作">
          <template v-slot="scope">
            <el-button @click="reset(scope.row)" type="text" :disabled="scope.row.score == 100 ? true : false">重置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total,prev, pager, next, jumper"
          :total="tableData.length">
      </el-pagination>
    </el-card>

    <!--详情对话框-->
    <el-dialog title="安全事件详情" :visible.sync="centerDialogVisible" width="50%">
      <ul>
        <li v-for="(item,index) in details" :key="item.id" >
          <p>{{details[index]}}</p>
        </li>
      </ul>
      <!--<span class="detail" v-html="details"></span>-->
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.getData();
  },
  data() {
    return {
      tableData: [],
      iconIndex: '1',
      icons: {
        "1": "iconfont icon-d-lianghao",
        "2": "iconfont icon-tishi",
        "3": "iconfont icon-jinggao",
      },
      pageNum: 1, //当前页
      pageSize: 7, //每页显示条目数
      centerDialogVisible: false,
      // 表格中显示数量
      showLength: 65,
      details: []
    }
  },
  methods: {
    // 获取表格数据
    getData() {
      this.$axios.get('/awareness/event/select_in_seven_day')
        .then((res)=> {
          // console.log(res);
          this.tableData = res.data.result.data;
        })
        .catch(() => {
          // this.$message.error('获取数据失败！');
        });
    },

    // 重置当前行分数
    reset(row) {
      // 判断是否登录超时，超时取消操作并跳转登录页
      if (!this.$cookies.isKey("status")) {
        // 销毁登录信息的cookie
        this.$cookies.remove("loginInfo");
        // 更新登录状态码为未登录状态
        this.$cookies.set("loginStatus", -2,0);
        this.$router.push("/login");
        this.$message.warning("重置失败，登录已超时，请重新登陆！");
        return;
      }
      // console.log(row.ip);
      this.$axios.get('/awareness/event/update_one_ip_score', {
        params: {
          ip: row.ip
        }
      }).then((res)=> {
          // console.log(res);
          if (res.data.status.code == 1) {
            this.$message.success("已重置当前分数！");
            // 更新当前行的分数
            var index = this.tableData.findIndex(item => item.ip === row.ip);
            // console.log(index);
            this.tableData[index].score = res.data.result[0].score;
          }
        })
        .catch(() => {
          this.$message.error('重置失败！');
        });
    },
    //分页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
    },
    //当前页数改变
    handleCurrentChange(val) {
      this.pageNum = val;
    },
    // 查看详情数据
    viewDetails(info) {
      this.centerDialogVisible = true;
      this.details = info.split('||');
    },
    // 重置所有分数
    /*resetAllScore() {
      // 判断是否登录超时，超时取消操作并跳转登录页
      if (!this.$cookies.isKey("status")) {
        // 销毁登录信息的cookie
        this.$cookies.remove("loginInfo");
        // 更新登录状态码为未登录状态
        this.$cookies.set("loginStatus", -2,0);
        this.$router.push("/login");
        this.$message.warning("重置失败，登录已超时，请重新登陆！");
        return;
      }
      this.$axios.get('/awareness/event/update_all_ip_score')
        .then((res)=> {
          console.log(res);
          if (res.data.status.code == 1) {
            this.$message.success("已重置全部分数！");
            // 重新获取数据
            this.tableData = res.data.result;
          }
        })
        .catch(() => {
          this.$message.error('重置失败！');
        });
    },*/
    // 显示指定长度的数据
    cutstr(str, len) {
      var str_length = 0;
      var str_len = 0;
      var str_cut = "";
      str_len = str.length;
      for (var i = 0; i < str_len; i++) {
        var a = str.charAt(i);
        str_length++;
        if (escape(a).length > 4) {
          //中文字符的长度经编码之后大于4
          str_length++;
        }
        str_cut = str_cut.concat(a);
        if (str_length >= len) {
          str_cut = str_cut.concat("...");
          return str_cut;
        }
      }
      //如果给定字符串小于指定长度，则返回原字符串
      if (str_length < len) {
        return str;
      }
    }
  },
  computed: {
    CurrentData() {
      let start = (this.pageNum - 1) * this.pageSize;
      let end = this.pageNum * this.pageSize;
      return this.tableData.slice(start, end);
    }
  }
}
</script>

<style scoped>
.el-card {
  width: 100%;
  margin: 0 auto;
}
.el-table {
  width: 100%;
  font-family: 宋体;
  font-size: 16px;
}
.el-table /deep/ .cell {
  overflow: visible;
}
.el-pagination {
  margin-top: 15px;
}
/deep/ .el-dialog__body {
  padding: 10px 20px;
  line-height: 25px;
}
/deep/ .el-dialog__header {
  background-color: #87b6da;
  padding: 10px;
}
/deep/ .el-dialog__title {
  color: white;
  font-family: 黑体;
}
</style>